<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>ArkId登录</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->
    <script type="text/javascript">
        console.log('heeeee')
        var token = localStorage.getItem('token')
        var next = '{{ next }}'
        if (token == "undefined" || token == '' || token === null) {
        } else {
            window.location.replace(next)
        }
    </script>
    <script type="text/javascript">
        // window.onload = function () {
        //     var token = localStorage.getItem('token')
        //     var next = '{{ next }}'
        //     if (token == "undefined" || token == '' || token === null) {
        //         return
        //     } else {
        //         window.location.replace(next)
        //     }

        // };
        function sendData(data) {
            var XHR = new XMLHttpRequest();
            var urlEncodedData = "";
            var urlEncodedDataPairs = [];
            var name;
            var next = '{{ next }}'

            // 将数据对象转换为URL编码的键/值对数组。
            for (name in data) {
                urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
            }

            // 将配对合并为单个字符串，并将所有%编码的空格替换为
            // “+”字符；匹配浏览器表单提交的行为。
            urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

            // 定义成功数据提交时发生的情况
            XHR.addEventListener('load', function (event) {
                // alert('耶! 已发送数据并加载响应。');
                if (XHR.readyState == XHR.DONE) {
                    if (XHR.status == 200) {
                        console.log(XHR.responseText)
                        var result = JSON.parse(XHR.responseText)
                        var token = result['token']
                        if (typeof(token) == 'undefined') {
                            message = result['message']
                            alert(message)
                        }else{
                            window.localStorage.setItem('token', token)
                            window.location.replace(next)
                        }

                    }
                }
            });

            // 定义错误提示
            XHR.addEventListener('error', function (event) {
                alert('哎呀！出问题了。');
            });

            // 建立我们的请求
            XHR.open('POST', 'http://localhost:8000/api/v1/backend_login/');

            // 为表单数据POST请求添加所需的HTTP头
            XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            // 最后，发送我们的数据。
            XHR.send(urlEncodedData);
        };

        function login() {
            var username = document.getElementById('username').value
            var password = document.getElementById('password').value
            sendData({'username':username, 'password':password})
        }
    </script>
</head>

<body>
    <!--[if lt IE 8]>
            <p class="browserupgrade">
            You are using an <strong>outdated</strong> browser. Please
            <a href="http://browsehappy.com/">upgrade your browser</a> to improve
            your experience.
            </p>
        <![endif]-->
    <div class='login'>
        <div class='login_title'>
            <span>登录</span>
        </div>
        <div class="login_fields">
            <div class="login_fields__user">
                <input id="username" placeholder="用户名" maxlength="16" type="text" />
            </div>
            <div class="login_fields__password">
                <input id="password" placeholder="密码" maxlength="16" type="text" />
            </div>
            <div class="login_fields__submit">
                <button onclick="login()">登录</button>
            </div>
        </div>
        <div class="disclaimer">
            <p>欢迎登录ArkId</p>
        </div>
    </div>
</body>

</html>
